<template>
  <select
    :class="cn(selectVariants({ color, size }), $attrs.class)"
    v-model="modelValue"
  >
    <option v-for="option in options" :value="option.value">
      {{ option.label }}
    </option>
  </select>
</template>
<script setup lang="ts">
import { cva } from "class-variance-authority";
import { cn } from "../utils";
import type { Color, Size } from "../ui/types";

interface Props {
  color?: Color;
  size?: Size;
  options: {
    label: string;
    value: string;
  }[];
}
const selectVariants = cva("select", {
  variants: {
    color: {
      primary: "select-primary",
      secondary: "select-secondary",
      accent: "select-accent",
      neutral: "select-neutral",
      info: "select-info",
      success: "select-success",
      warning: "select-warning",
      error: "select-error",
    },
    size: {
      xs: "select-xs",
      sm: "select-sm",
      md: "select-md",
      lg: "select-lg",
      xl: "select-xl",
    },
  },
});
defineProps<Props>();
const modelValue = defineModel();
</script>
